<template>
    <el-dialog :visible.sync="smallCodeDialog" width="60%" top="10px" center :before-close="closeDialog">
        <div style="text-align: center;">
            <p style="color: #1466D0;font-size: 20px;margin-bottom: 20px;">手机打开微信，扫码进入小程序学习</p>
            <p style="color: #FF0000;margin-bottom: 20px;font-size: 20px;">注意微信与该账户绑定后不可解绑！</p>
            <img :src="smallCodeUrl" width="200px" height="200px">
            <p v-show="String.isEmptyOrNUll(showCountText)" style="color: #ff0000;font-size: 22px;margin-top: 30px;">{{countDownNums}}s 后自动关闭</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="medium" @click="closeDialog">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    var _this;
    export default {
        data() {
            return {
                smallCodeDialog: false,
                countDownNums: 5,
                smallCodeUrl: "",
                timers: undefined,
                showCountText:""
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {},
        methods: {
            showSmallCode() {
                clearTimeout(this.timers);
                this.common.postNotLoading(this.api.getQRCode, {}, function(res) {
                    if (!String.isEmptyOrNUll(res.resultMap)) {
                        _this.smallCodeUrl = res.resultMap;
                        _this.smallCodeDialog = true;
                        _this.countDown();
                    }
                });
            },
            showSmallCodeDialog(data) {
                clearTimeout(this.timers);
                this.showCountText=data;
                this.common.postNotLoading(this.api.getQRCode, {}, function(res) {
                    if(!String.isEmptyOrNUll(data)){
                        _this.smallCodeUrl = res.resultMap;
                        _this.smallCodeDialog = true;
                    }
                    if (res.ext) return;
                    if (!String.isEmptyOrNUll(res.resultMap)) {
                        _this.smallCodeUrl = res.resultMap;
                        _this.smallCodeDialog = true;
                        _this.countDown();
                    }
                });
            },
            countDown() {
                this.countDownNums--;
                if (this.countDownNums <= 0) {
                    this.smallCodeDialog = false;
                    clearTimeout(this.timers);
                    this.countDownNums = 5;
                    return;
                }
                this.timers = setTimeout(_this.countDown, 1000);
            },
            closeDialog() {
                this.smallCodeDialog = false;
                clearTimeout(this.timers);
                this.countDownNums = 5;
            }
        }
    }
</script>

<style>
</style>
